<template>
  <div class="main-admin">
      <span>用戶信息</span>
		<el-container>
		  <el-aside style="width: 80px">
		    <span>头像:</span>
		  </el-aside>
		  <el-main>
		    <el-upload ref="upload"
		    					drag
		              :action="action"
		              :data="uploadData"
		    					multiple
		    					:auto-upload="true"
		    					:limit="1"
		    					:on-success="handleFilUploadSuccess"
		    					:on-remove="handleRemove"
		              :before-upload="beforeAvatarUpload"
		    					>
		              <i class="el-icon-upload"></i>
		              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
		              <div class="el-upload__tip" slot="tip">只能上传 图片，且不超过2M</div>
		      </el-upload>
		      <el-divider></el-divider>
		
		      <el-form :label-position="labelPosition"
		               label-width="80px"
		               :model="form"
		               ref="form">
		
		        <el-form-item label="电话"
		                      prop="phone">
		          <el-input v-model="form.phone"
		                    placeholder="请输入电话号"></el-input>
		        </el-form-item>
		        <el-form-item label="qq"
		                      prop="qq">
		          <el-input v-model="form.qq"
		                    placeholder="请输入qq"></el-input>
		        </el-form-item>
		       <el-form-item label="email"
		                     prop="邮箱">
		         <el-input v-model="form.email"
		                   placeholder="请输入邮箱"></el-input>
		       </el-form-item>
		       <el-form-item label="住址"
		                     prop="qq">
		         <el-input v-model="form.liveAddress"
		                   placeholder="请输入住址"></el-input>
		       </el-form-item>
		       <el-form-item label="兴趣"
		                     prop="hobby">
		         <el-input v-model="form.hobby"
		                   placeholder="请输入兴趣"></el-input>
		       </el-form-item>
		       <el-form-item label="生日"
		                     prop="birthday">
		         <el-input v-model="form.biethday"
		                   placeholder="请选择生日"></el-input>
		       </el-form-item>
		
		
		        <el-form-item>
		          <el-button type="primary"
		                     @click="update">保存
		          </el-button>
		        </el-form-item>
		      </el-form>
		
		
		  </el-main>
		</el-container>
		<el-container>
		
		</el-container>
		
		
		
	</div>
</template>

<script>
export default {
    name:'AdminInfo',
    data() {
		return{
			imageUrl: '',
			userId: '',
			action:'',
			uploadData:{type: 'jpg'},//保存格式
			////表单相关
			labelPosition: 'right',
			form: {
			  phone: undefined,
			  email: undefined,
			  qq: undefined,
			  liveAddress: undefined,
			  hobby: undefined,
			  birthday: undefined,
			},
		  userlist: [{
			username:'admin',
			process:'管理員'
		  }]
		}
  },
  created() {
    this.userId = this.$store.getters.getUser.user.id
    this.action="http://localhost:8080/message/user/userPic?userId="+this.userId
    this.getNodeData()
  },
  computed: {
  },
  methods: {
    handleRemove(file,fileList) {
    		console.log(file,fileList);
    },
    // 文件上传成功时的函数
    handleFilUploadSuccess (res,file,fileList) {
      console.log(res,file,fileList)
  
      this.$message.success("上传成功")
    },
    handleUpload () {
      // console.log(res,file)
      this.submitUpload()
      this.dialogVisible = false
    },
     beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
  
        if(!isJPG && !isPNG){
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return (isJPG || isPng) && isLt2M;
      },
      ////表单相关
      getNodeData() {
          //this.form.phone = '12345678931'
		  var url = 'http://localhost:8080/message/user/getPersonInfo?userId=' +this.userId
		  this.axios.get(url).then(response=>{
            this.form = response.data.data
          })
      },
      update() {
        this.$refs.form.validate((valid) => {
          if (!valid) return
          // console.log(this.form)
		  //this.form.phone = '12345678931'
		  var url = 'http://localhost:8080/message/user/savePerson?userId='+this.userId
		  this.axios.put(url,this.form).then(() => {
            this.getNodeData()
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success',
              duration: 2000
            })
          })
        })
      },
    }
}
</script>

<style>
.main-admin ul{
    list-style: none;
}
.main-admin h2{
    margin: 0 300px;
}
</style>